<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="广告标题">
        <el-input v-model="page.rname" placeholder="广告标题"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="page.rname" placeholder="状态"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAllRole">查询</el-button>
        <el-button type="success" @click="clear">重置</el-button>
        <el-button type="add" @click="clear">添加</el-button>
      </el-form-item>
    </el-form>
    <!--    弹出窗-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="mid"
          default-expand-all
          :props="defaultProps">
</el-tree>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updSubRole()">确 定</el-button>
  </span>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="guangtu"
        label="广告图片">
      </el-table-column>
      <el-table-column
        prop="guangbiao"
        label="广告标题">
      </el-table-column>
      <el-table-column
        prop="begin"
        label="开始时间">
      </el-table-column>
      <el-table-column
        prop="end"
        label="结束时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.statusId"
            @change="handleChangeStatus(scope.row,scope.row.statusId)"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正常"
            inactive-text="禁用">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index,scope.row)" v-has="'role:delete'">删除</el-button>
          <el-button type="text" @click="dialogVisible = true">修改</el-button>
          <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="广告图片">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible1">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item label="广告标题:">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="广告链接:">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="广告排序">
                <el-input-number v-model="formInline.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="跳转方式">
                <template>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-time-select
                  v-model="value"
                  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-time-select
                  v-model="value"
                  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页插件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[1,5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import qs from 'qs';
export default {
  methods: {
    handleChangeStatus(obj,statusId){
      const title = { 1: '禁用', 0: '启用' }
      this.$confirm(`确定要${title[statusId]}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.statusId=obj.statusId
      }).catch(() => {
        obj.statusId=(statusId+1)%2
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
    // tableRowClassName({row, rowIndex}) {
    //   if (rowIndex%4 === 1) {
    //     return 'warning-row';
    //   } else if (rowIndex%4 === 3) {
    //     return 'success-row';
    //   }
    //   return '';
    // },
    // //查询所有角色信息
    // queryAllRole(){
    //   //axios 访问后台 查询所有的角色信息
    //   this.$axios.post("test/t-role/findAllRole",qs.stringify(this.page)).then(r=>{
    //     //alert(r.data)
    //     this.tableData = r.data.records;
    //     this.page.total = r.data.total;
    //   })
    // },
    // async updRole(rid){
    //   this.rolePer.rid = rid;
    //   this.dialogVisible = true;
    //   //获取树形菜单里边的数据
    //   await this.$axios.get("test/t-premission/getAllPremission").then(r=>{
    //     this.treeData = r.data;
    //   })
    //   //获取即将选中的数据
    //   //根据角色的id 查询 角色的资源
    //   this.$axios.post("test/t-role-premission/getByRid?rid="+rid).then(r=>{
    //     // alert(JSON.stringify(r.data));
    //     //虚拟dom
    //     r.data.forEach(item=>{
    //       this.$nextTick(()=>{
    //         this.$refs.tree.setChecked(item.pid,true,false);
    //       })
    //     })
    //   })
    // },
    // updSubRole(){
    //   //alert(this.rid);
    //   //获取选中的和半选状态的复选框mid的值
    //   let arr = this.$refs.tree.getCheckedNodes(false,true);
    //   //alert(JSON.stringify(arr));
    //   //获取mid
    //   let per=[];
    //   arr.forEach(item=>{
    //     per.push(item.mid);
    //   })
    //   //per.toString();
    //   this.rolePer.mids = per.join(",");
    //   this.$axios.post("test/t-role-premission/updSub",qs.stringify(this.rolePer)).then(r=>{
    //     //alert(r.data.code);
    //     this.dialogVisible = false;
    //   })
    //
    // },
    // //更改显示的条数
    // handleSizeChange(val){
    //   this.page.size=val;
    //   //查询数据
    //   this.queryAllRole();
    // },
    // //当前页的数据更改
    // handleCurrentChange(val){
    //   //val代表的是当前页
    //   this.page.current=val;
    //   //当前页
    //   this.queryAllRole();
    // },
  },
  // created() {
  //   this.queryAllRole();
  // },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible1: false,
      options: [{
        value: '选项1',
        label: '新窗口打开'
      }, {
        value: '选项2',
        label: '同窗口打开'
      }],
      value: '',
      dialogVisible: false,
      formInline: {
        num: '1',
        value: ''
      },
      tableData: [{
        id:'1',
        guangtu:'这是一个图片',
        guangbiao:'视频点播宣传',
        begin:'2020',
        end:'2021',
        status:'正常'
      }],


      page:{
        rname:"",
        current:1,//当前页
        size:10,//每页显示的条数
        total:0//总条数
      },
    }
  }
}
</script>
